/**
 * @author:  wangjian
 * @time:    2021-06-25
 * @content: 自定义选择弹窗
 */

"use strict";

/**
 * @param option 配置参数，参考layer,layui-table配置
 * 配置清单：
 * url：数据请求路径 【必须】
 * cols：数据列
 * callback：选择后回调
 * element：点击触发弹框的元素
 * width: 宽度
 * height: 高度
 */
var selectDialog = function(option) {
    selectDialog_(option.element, option, option, option.callback);
}

/**
 * @param element
 * @param options 弹框配置
 * @param table_options 表格配置
 * @param callBack 选择后回调
 * @private
 */
var selectDialog_ = function(element, options, table_options, callBack) {

    //生成随机ID
    var ID = Date.now();
    var select_dialog_table = "select_dialog_table_"+ID;
    var select_dialog_search = "select_dialog_search"+ID;

    //表格配置
    var table_options_ = {
        elem: '#'+select_dialog_table,
        cols: [],
        url: '',
        where: {
            search: ''
        },
        width: 600,
        height: 400,
        page: {layout: ['prev', 'count', 'next']},
        size: 'sm',
        limit: 25
    }
    if(table_options && table_options.url) table_options_.url = table_options.url;
    if(table_options && table_options.cols) table_options_.cols = [table_options.cols];
    if(table_options && table_options.width) table_options_.width = table_options.width;
    if(table_options && table_options.height) table_options_.height = table_options.height;

    //表格返回数据格式修改
    table_options_.parseData = function(res){
        return {
            "code": 0, //解析接口状态
            "msg": "", //解析提示文本
            "count": res.length, //解析数据长度
            "data": res.slice(0, table_options_.limit) //解析数据列表
        };
    };

    // 弹框内容
    var content = ""+
        "<div class=\"layui-card\">" +
            "<div class=\"layui-card-body\">" +
                "<div style=\"text-align: left\" id="+select_dialog_search+">" +
                    "<div class=\"layui-inline\">" +
                        "<label class=\"layui-form-label\" style=\"padding: 5px 0px;\">筛选条件：</label>" +
                        "<div class=\"layui-input-inline\">" +
                            "<input class=\"layui-input\" style=\"height: 30px;width: 240px;\" name=\"search\" autocomplete=\"off\">" +
                        "</div>" +
                    "</div>" +
                    "<div class=\"layui-inline\">" +
                        "<button type=\"button\" class=\"layui-btn layui-btn-normal layui-btn-sm\"><i class=\"layui-icon\"></i> 搜 索</button>" +
                    "</div>" +
                "</div>" +
                "<div style=\"height: "+(table_options_.height+10)+"px;width: "+(table_options_.width+10)+"px\">" +
                    "<table id=\""+select_dialog_table+"\" lay-filter=\""+select_dialog_table+"\"></table>" +
                "</div>" +
            "</div>" +
        "</div>";

    //选择后执行回调方法
    var callBack_;
    if(callBack) {
        callBack_ = callBack;
    } else {
        callBack_ = function (data, element, $) {
            $(element).val(Object.values(data)[0]);
        };
    }

    // 弹框配置
    var options_ = {
        type: 1,                    //基本层类型
        title: '请选择',             //标题
        content: content,           //内容
        area: 'auto',               //宽高
        maxWidth: 1200,              //最大宽度
        maxHeight: 700,              //最大高度
        // offset: [top, left],     //坐标
        // closeBtn: '1',           //关闭按钮样式
        // skin: '',                   //样式类名
        // shade: [0.3, '#393D49'], //遮罩
        // time: 5000,              //自动关闭所需毫秒
        // anim: 0,                 //弹出动画
        // maxmin: true,            //最大最小化
        //fixed: true,              //固定
        //resize: true,             //是否允许拉伸
        // scrollbar: true          //是否允许浏览器出现滚动条
    }
    if(options && options.title) options_.title = options.title;

    //层弹出后的成功回调方法渲染表格
    options_.success = function (layero, index) {
        layui.use(['table'], function() {
            var table = layui.table;
            var $ = layui.$;
            table.render(table_options_);
            table.on('row('+select_dialog_table+')', function(obj){
                callBack_(obj.data, element, $)
                //移动端layer没有index参数
                if(!index) {
                    index = $(layero).attr("index")
                }
                layer.close(index);
            });
            //绑定条件筛选
            $("#"+select_dialog_search).find("button").click(function() {
                var search_value = $("#"+select_dialog_search+" [name='search']").val();
                table.reload(select_dialog_table, {
                    where: {
                        search: search_value
                    }
                });
            });
        });
    };

    layer.open(options_);
}
